<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2014/10/30
  Time: 17:41
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="/WEB-INF/lib/spring.tld"%>
<c:set value="${pageContext.request.contextPath}" var="path" scope="session"/>
<html>
<head>
    <title><spring:message code='register.message.title' /></title>
    <link href="${path}/style/acg/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" media="screen" href="${path}/plugins/validate/validate.css">
    <script src="${path}/js/jquery.min.js" type="text/javascript"></script>
    <script src="${path}/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>
    <c:if test="${ sessionScope.language != 'en'}">
        <script src="${path}/plugins/validate/messages_cn.js" type="text/javascript"></script>
    </c:if>
    <style type="text/css">
        .code
        {

            font-family:Arial;
            font-style:italic;
            color:Red;
            letter-spacing:3px;
            font-weight:bolder;
            float:left; width:108px; height:38px;border: 1px solid #DDDDDD;
            text-align: center;
            background-color: whitesmoke;
        }

    </style>
    <script type="text/javascript">
        $(function(){

            createCode();

            var validate = $("#frm").validate({
                rules : {
                    userName :{
                        required: true,
                        minlength: 6,
                        remote: {
                            url: "${path}/register/checkUserName.html",     //后台处理程序
                            type: "get",               //数据发送方式
                            dataType: "json",           //接受数据格式
                            data: {                     //要传递的数据
                                userName: function() {
                                    return $("#userName").val();
                                }
                            }
                        }
                    },
                    email :{
                        required: true,
                        email:true,
                        remote: {
                            url: "${path}/register/checkUserEmail.html",     //后台处理程序
                            type: "get",               //数据发送方式
                            dataType: "json",           //接受数据格式
                            data: {                     //要传递的数据
                                email: function() {
                                    return $("#email").val();
                                }
                            }
                        }
                    },
                    phone :{
                        required: true,
                        minlength: 11,
                        maxlength: 11,
                        digits:true,
                        remote: {
                            url: "${path}/register/checkUserPhone.html",     //后台处理程序
                            type: "get",               //数据发送方式
                            dataType: "json",           //接受数据格式
                            data: {                     //要传递的数据
                                phone: function() {
                                    return $("#phone").val();
                                }
                            }
                        }
                    },
                    psd: {
                        required: true,
                        minlength: 6
                    },
                    repeatPassword: {
                        required: true,
                        minlength: 6,
                        equalTo: "#psd"
                    },
//                    verifcode:{
//                        required: true
//                    },
                    agree: "required"
                },
                messages : {
                        userName :{
                        required: "<spring:message code='register.message.msg1' />",
                        minlength: "<spring:message code='register.message.msg2' />",
                        remote: "<spring:message code='register.message.msg3' />"
                    },
                    phone :{
                        required: "<spring:message code='register.message.msg4' />",
                        minlength: "<spring:message code='register.message.msg5' />",
                        maxlength: "<spring:message code='register.message.msg5' />",
                        digits:"<spring:message code='register.message.msg5' />",
                        remote: "<spring:message code='register.message.msg8' />"
                    },
                    email :{
                        required: "<spring:message code='register.message.msg9' />",
                        email: "<spring:message code='register.message.msg10' />",
                        remote: "<spring:message code='register.message.msg11' />"
                    },
                    psd: {
                        required: "<spring:message code='register.message.msg12' />",
                        minlength: "<spring:message code='register.message.msg13' />"
                    },
                    repeatPassword: {
                        required: "<spring:message code='register.message.msg14' />",
                        minlength: "<spring:message code='register.message.msg15' />",
                        equalTo: "<spring:message code='register.message.msg16' />"
                    },
                    verifcode:{
                        required: "<spring:message code='register.message.msg17' />"
                    }
                },
                success: function(label) {//验证成功添加样式
                    label.html("&nbsp;").removeClass("checked").addClass("checked");
                },
                submitHandler : function(){

                    if(!validateCode()){
                        return false;
                    }


                    $.post("${path}/register/register.html",
                        $("#frm").serialize()
                        ,function(data){
                            if(data.status == 0){
                                window.location="${path}/register/result.html";
                            }else{
                                alert("<spring:message code='register.message.msg18' />");
                                $("#jcimg").trigger("click");
                            }
                        },"json");
                }
            });
        });


        (function($){
            $.fn.serializeJson=function(){
                var serializeObj={};
                $(this.serializeArray()).each(function(){
                    serializeObj[this.name]=this.value;
                });
                return serializeObj;
            };
            $.errorHanld=function(msg){
                $("."+msg).fadeIn(1000).fadeOut(5000);
                //$("#jcimg").trigger("click");
                createCode();//刷新验证码
            };
        })(jQuery);

        //-----------------
        var code ; //在全局 定义验证码
        function createCode()
        {
            code = "";
            var codeLength = 5;//验证码的长度
            var checkCode = document.getElementById("checkCode");
            var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的

            for(var i=0;i<codeLength;i++)
            {


                var charIndex = Math.floor(Math.random()*36);
                code +=selectChar[charIndex];


            }
//       alert(code);
            if(checkCode)
            {
                checkCode.className="code";
                checkCode.value = code;
            }

        }

        function validateCode ()
        {
            var inputCode = document.getElementById("verifcode").value;

            if(inputCode.toUpperCase() != code )
            {
                $.errorHanld("vercImg");
                return false;
            }
            else
            {
                return true;
            }

        }
    </script>
</head>
<body>
<jsp:include page="../public/header.jsp"></jsp:include>
<form id="frm" method="post">
    <div id="container">
        <div class="wrapper">
            <div class="border">
                <div class="modetitle">
                    <spring:message code='register.message.msg19' />
                </div>
                <div class="regloginbox">
                    <div class="formbox">
                        <ul>
                            <li class="clearfix">
                                <dl>
                                    <dt><spring:message code='register.message.msg20' /></dt>
                                    <dd><input type="text" id="userName" name="userName" class="txt328" value=""  placeholder="<spring:message code='register.message.msg21' />"/></dd>
                                </dl>
                            </li>
                            <li class="clearfix">
                                <dl>
                                    <dt><spring:message code='register.message.msg22' /></dt>
                                    <dd><input type="text" id="email" name="email" class="txt328" value="" placeholder="<spring:message code='register.message.msg23' />"/></dd>
                                </dl>
                            </li>
                            <li class="clearfix">
                                <dl>
                                    <dt><spring:message code='register.message.msg24' /></dt>
                                    <dd><input type="text" id="phone" name="phone" class="txt328" value="" placeholder="<spring:message code='register.message.msg25' />"/></dd>
                                </dl>
                            </li>
                            <li class="clearfix">
                                <dl>
                                    <dt><spring:message code='register.message.msg26' /></dt>
                                    <dd><input type="password" id="psd" name="psd" class="txt328" value="" placeholder="<spring:message code='register.message.msg27' />"/></dd>
                                </dl>
                            </li>
                            <li class="clearfix">
                                <dl>
                                    <dt><spring:message code='register.message.msg28' /></dt>
                                    <dd><input type="password" id="repeatPassword" name="repeatPassword" class="txt328" value="" placeholder="<spring:message code='register.message.msg29' />"/></dd>
                                </dl>
                            </li>
                            <li class="clearfix">
                                <dl>
                                    <dt><spring:message code='register.message.msg30' /></dt>
                                    <dd>
                                        <input type="text" id="verifcode" name="verifcode" class="txtcode" value="" />
                                        <%--<img id="jcimg" src="${path}/jcaptcha" class="imgcode"  width="80" height="20" onclick="javascript:this.src='${path}/jcaptcha?'+Math.random();">--%>
                                        <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="imgcode"  />
                                        <img class="vercImg" src="${path}/style/common/images/erase.png" style="display: none"  border="0">
                                    </dd>
                                </dl>
                            </li>
                            <li class="clearfix">
                                <dl>
                                    <dt>&nbsp;</dt>
                                    <dd><input type="checkbox" id="agree" name="agree" value="1" checked="checked" class="chkinput" /><label><spring:message code='register.message.msg31' /></label></dd>
                                </dl>
                            </li>
                            <li class="clearfix">
                                <dl>
                                    <dt>&nbsp;</dt>
                                    <dd><input type="submit" id="register" name="register" value="<spring:message code='register.message.msg32' />" class="btn_org" /></dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                    <div class="formright">
                        <h2><spring:message code='register.message.msg33' /></h2>
                        <a href="${path}/login/index.html" class="btn_grey"><spring:message code='register.message.msg34' /></a>
                    </div>
                    <div class="clr"></div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="presenter" value="${presenter}"/>
</form>
<jsp:include page="../public/footer.jsp"></jsp:include>
</body>
</html>
